<!--
 * @Author: 咔咔 11438594+fetun@user.noreply.gitee.com
 * @Date: 2025-07-08 23:27:12
 * @LastEditors: 咔咔 11438594+fetun@user.noreply.gitee.com
 * @LastEditTime: 2025-10-09 22:02:03
 * @FilePath: \vue3-project\app\src\views\common\Header.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="header-wrap">
    <ul class="menus">
      <li 
        class="m-item"
        @click="handleMenuClick(menuItem)"
        v-for="menuItem of menus"
        :key="menuItem.routeName"
      >
        {{ menuItem.name }}
      </li>
    </ul>
  </div>
</template>

<script setup>

import { useRouter } from 'vue-router';

const menus = [
  {
    name: 'css特效',
    routeName: 'SpecialEffect',
  },{
    name: '图表',
    routeName: 'Charts',
  },
];
 
const router = useRouter();
const handleMenuClick = (menuItem) => {
  router.push({ name: menuItem.routeName });
};
</script>

<style lang="less" scoped>
.header-wrap {
    background: #eee;
    padding:4px;
    .menus {
        display: flex;
        .m-item {
            cursor: pointer;
            border-radius: 8px;
            padding: 8px 10px;
            background: #fff;
        }
    }
}
</style>